<template>
  <div>
    <FModal header="修改流程" width="900" :loading="loading"
            ref="FModal" @ok="flowModelChange">
      <div class="flow-model-container f-flow-design-image-wrapper">
        <svg :id="containerID" :style="svgStyle" ref="FlowModel" class="f-flow-design-image">
          <g/>
        </svg>
      </div>
    </FModal>
    <ContextModal :zIndex="2068" ref="ContextModal" :width="200"
                  @contextItemClick="contextItemClick">
      <template v-slot:add>
        <add/>
      </template>

      <template v-slot:branch>
        <branch/>
      </template>

      <template v-slot:remove>
        <remove/>
      </template>

      <template v-slot:setting>
        <setting/>
      </template>

      <template v-slot:history>
        <history/>
      </template>

    </ContextModal>

    <UserTaskModal style="z-index: 2068" ref="UserTaskModal" @addUserTask="addUserTask"/>
    <LineFormulaModal style="z-index: 2068" ref="LineFormulaModal" @formulaEdited="lineFormulaModalOK"/>
    <UserTaskPropertiesModal style="z-index: 2068" @updateUserTask="updateUserTask" ref="UserTaskPropertiesModal"
                             @ok="userTaskPropertiesModalOK" :editable="userTaskModalEditable"/>
  </div>
</template>

<script>
import FlowHistoryImageHelper from '@/components/flow/FlowHistoryImageHelper';
import {isEmpty, isNotEmpty} from '@/utils/CommonUtils';
import FlowModelRender from '@/components/flow/FlowModelDesigner/FlowModelRender.vue';
import UserTaskModal from '@/components/flow/UserTaskModal.vue';
import UserTaskPropertiesModal from '@/components/flow/UserTaskPropertiesModal.vue';
import ContextModal from '@/components/flow/ContextModal';
import LineFormulaModal from '@/components/flow/LineFormulaModal.vue';
import FlowDesignHelper from '@/components/flow/FlowModelDesigner/FlowDesignHelper';
import FModal from '@/components/FModal/index.vue';

export default {
  name: 'FlowApproveEditorComponent',
  components: {FModal, LineFormulaModal, ContextModal, UserTaskPropertiesModal, UserTaskModal},
  extends: FlowModelRender,
  mounted() {
  },
  data() {
    return {
      loading: false,
      clickingNode: undefined,
      activeUserTaskContext: [
        {title: '增加任务', id: 'createNode', icon: 'add'},
        {title: '属性', id: 'propertyConfig', icon: 'setting'},
        {title: '查看审批信息', id: 'showHistory', icon: 'history'},
      ],
      historyUserTaskContext: [
        {title: '属性', id: 'propertyConfig', icon: 'setting'},
        {title: '查看审批信息', id: 'showHistory', icon: 'history'},
      ],
      userTaskContext: [
        {title: '增加任务', id: 'createNode', icon: 'add'},
        {title: '插入任务', id: 'insertNode', icon: 'add'},
        {title: '增加分支', id: 'addParallelNode', icon: 'branch'},
        {title: '属性', id: 'propertyConfig', icon: 'setting'},
        {title: '删除', id: 'removeNode', icon: 'remove'},
      ],
      flowImageHistory: {
        activeNodes: [],
        passedNodes: [],
        flowModel: undefined
      }
    };
  },
  methods: {
    setData(flowModel) {
      this.flowModel = flowModel;
      this.flowDesignHelper = new FlowDesignHelper({
        flowModel: this.flowModel,
        formDefinition: this.formDefinition,
        containerID: this.containerID
      });
      this.bindFlowDesignerHelper();
      this.refreshFlowModel();
      this.$refs.FModal.open();
    },
    flowModelChange() {
      this.$emit('flowModelChange', this.flowDesignHelper.flowModel, () => {
        this.loading = true;
      });
    },
    bindFlowDesignerHelper() {
      this.flowDesignHelper.resolveNodeStyle = this.resolveNodeStyle;
      this.flowDesignHelper.resolveLineStyle = this.resolveLineStyle;
    },
    resolveNodeStyle(node, nodeDefinition) {
      if (node.id === 'start' || node.id === 'end') {
        let list = [...this.flowImageHistory.activeNodes, ...this.flowImageHistory.passedNodes];
        if (isNotEmpty(list.find(id => id === node.id))) {
          let label = node.node.label;
          label = $(label);
          label.addClass('common-node-passed');
          node.node.label = label[0].outerHTML;
        }
        return;
      }
      if (isEmpty(nodeDefinition) || isEmpty(nodeDefinition.className)) {
        return;
      }

      let className = nodeDefinition.className;
      let label = node.node.label;
      label = $(label);
      label.addClass(className);
      node.node.label = label[0].outerHTML;
    },
    resolveLineStyle(line, lineDefinition) {
      delete line.label;
      line.class = lineDefinition.className;
    },
    setFlowImageHistory(flowImageHistory) {
      this.flowImageHistory = flowImageHistory;
      this.parseFlowImage();

      this.$nextTick(() => {
        this.refreshFlowModel();
      });
      this.$refs.FModal.open();
    },
    bind() {
      // $(`#${this.containerID} .start-label`).click((e) => {});
      $(`#${this.containerID} .end-label`).click((e) => this.endNodeClick(e, 'end', this.endContext));
      $(`#${this.containerID} .user-label`).click((e) => this.userTaskNodeClick(e, e.target.getAttribute('data-user-task'), this.userTaskContext));
      $(`#${this.containerID} .empty-label`).click(this.emptyNodeClick);

      $(`#${this.containerID} .gateway-label-end`).click((e) => this.gateWayNodeClick(e, e.target.getAttribute('data-gateway'), this.gateWayEndContext));
      $(`#${this.containerID} .gateway-label-start`).click((e) => this.gateWayNodeClick(e, e.target.getAttribute('data-gateway'), this.gateWayStartContext));
    },
    endNodeClick(e, clickingNode, context) {
      this.clickingNode = clickingNode;
      //写到这里了
      this.openContextModal(context, e.clientX, e.clientY);
    },
    emptyNodeClick(e) {
      this.clickingNode = e.target.getAttribute('data-empty-task');
      if (this.isHistory(this.clickingNode)) {
        return;
      }
      this.openContextModal(this.emptyNodeContext, e.clientX, e.clientY);
    },
    isHistory(clickingNode) {
      try {
        let list = this.flowImageHistory.passedNodes;
        if (isEmpty(list)) {
          list = [];
        }
        return isNotEmpty(list.find(id => id === clickingNode));
      } catch (e) {
      }
      return false;
    },
    isActive(clickingNode) {
      try {
        let list = this.flowImageHistory.activeNodes;
        if (isEmpty(list)) {
          list = [];
        }
        return isNotEmpty(list.find(id => id === clickingNode));
      } catch (e) {
      }
      return false;
    },
    gateWayNodeClick(e, clickingNode, context) {
      this.clickingNode = clickingNode;
      if (this.isHistory(this.clickingNode)) {
        return;
      }
      this.openContextModal(context, e.clientX, e.clientY);
    },
    userTaskNodeClick(e, clickingNode, context) {
      this.clickingTarget = e.target
      this.clickingNode = clickingNode;
      if (this.isActive(this.clickingNode)) {
        this.openContextModal(this.activeUserTaskContext, e.clientX, e.clientY);
        return;
      }
      if (this.isHistory(this.clickingNode)) {
        this.openContextModal(this.historyUserTaskContext, e.clientX, e.clientY);
        return;
      }
      this.openContextModal(context, e.clientX, e.clientY);
    },
    parseFlowImage() {
      let helper = new FlowHistoryImageHelper(this.flowImageHistory, this.flowModel);
      this.flowModel = helper.parse();
      this.$nextTick(() => {
        this.refreshFlowModel();
      });
    },
    showHistory(element) {
      this.$emit('showHistory', element);
    },
    refreshFlowModel() {
      this.flowDesignHelper.render().then(() => {
        this.bind();
      });
    },
  },
  computed: {
    userTaskModalEditable() {
      if(isEmpty(this.clickingNode)) return true;
      return !this.isHistory(this.clickingNode) && !this.isActive(this.clickingNode);
    }
  },
};
</script>
